<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <h1>{{arr}}</h1>
        <!-- v-for 遍历 -->
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
        </ul>
        <!-- v-for遍历数组 v-for = '(数组的每一项，下标) in 数组' -->  
        <ul>
            <li v-for="(value,key,index) in obj" :key="index">{{index}}-{{key}}-{{value}}</li>
        </ul>
        <!-- v-for 可以遍历对象 v-for="(对象的value值，对象的key值，下标) in 对象" -->
        <!-- :key是一个唯一值，不一定是下标 -->
        <!-- v-for遍历对象或者数组时，可以用in 也可以使用of -->


        <ul>
            <li v-for="(item,index) in arr_obj" :key="index">{{item.name}}-{{item.age}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                arr:['tom','jack','jenny','liming'],
                obj:{
                    name:'tom',
                    age:10
                },
                arr_obj:[
                            {
                                name:'tom',
                                age:10
                            },
                            {
                                name:'jack',
                                age:11
                            },
                            {
                                name:'jenny',
                                age:15
                            },
                            {
                                name:'liming',
                                age:18
                            }
                        ]
            }
        })
    </script>
</body>
</html>